<template>
  <div>
    <el-container>
      <el-aside width="250px" style="background-color: rgb(35, 63, 82)">
        <el-scrollbar height="100vh">
          <div class="system-title">
            <div
              style="
                display: flex;
                align-items: center;
                justify-content: center;
                height: 80px;
              "
            >
              <img src="../img/pj.png" alt="" style="width: 50px" />
              <span
                style="
                  font-size: 30px;
                  font-weight: bold;
                  margin: 10px;
                  color: #eeeeee;
                "
                >评价系统</span
              >
            </div>
          </div>
          <el-menu router>
            <el-menu-item index="course" style="padding-left: 30px">
              <img
                src="../img/kc.svg"
                alt=""
                style="width: 25px; margin-right: 10px"
              />
              <span style="color: white; font-weight: 600; font-size: 25px"
                >课程管理</span
              >
            </el-menu-item>
            <el-menu-item index="task" style="padding-left: 30px">
              <img
                src="../img/rw.png"
                alt=""
                style="width: 25px; margin-right: 10px"
              />
              <span style="color: white; font-weight: 600; font-size: 25px"
                >任务管理</span
              >
            </el-menu-item>
            <el-menu-item index="personalInfo" style="padding-left: 30px">
              <img
                src="../img/xs.png"
                alt=""
                style="width: 25px; margin-right: 10px"
              />
              <span style="color: white; font-weight: 600; font-size: 25px"
                >学生管理</span
              >
            </el-menu-item>
            <!-- <el-menu-item index="aiAssistant">
              <span style="color: white; font-weight: 600; font-size: 25px">AI助教</span>
            </el-menu-item> -->

            <el-sub-menu style="padding-left: 10px">
              <template #title>
                <img
                  src="../img/xz.png"
                  alt=""
                  style="width: 25px; margin-right: 10px"
                />
                <span style="color: white; font-weight: 600; font-size: 25px"
                  >勋章管理</span
                >
              </template>
              <el-menu-item index="medal">
                <span style="color: white; font-weight: 600; font-size: 20px"
                  >勋章榜</span
                >
              </el-menu-item>
              <el-menu-item index="stu">
                <span style="color: white; font-weight: 600; font-size: 20px"
                  >学生评分表</span
                >
              </el-menu-item>
              <el-menu-item index="stuVote">
                <span style="color: white; font-weight: 600; font-size: 20px"
                  >学生投票</span
                >
              </el-menu-item>
            </el-sub-menu>

            <div
              style="
                width: 200px;
                height: 100px;
                background: rgb(35, 63, 90, 0.2);
                cursor: pointer;
              "
              @click="$router.push('/')"
            >
              <!-- <el-icon><HomeFilled style="font-size: 70px" /></el-icon> -->
            </div>
          </el-menu>
        </el-scrollbar>
      </el-aside>
      <el-main
        style="
          padding: 0;
          background: rgb(35, 63, 82);
          overflow: scroll;
          height: 100vh;
        "
      >
        <!-- 科技感固定顶部栏 -->
        <div
          style="
            position: fixed;
            top: 0;
            left: 250px;
            right: 0;
            height: 80px;
            background: linear-gradient(135deg, #243f52 0%, #1a2a3a 100%);
            display: flex;
            justify-content: flex-end;
            align-items: center;
            padding: 0 30px;
            z-index: 1000;
            border-bottom: 1px solid rgba(74, 158, 255, 0.2);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4),
              0 0 30px rgba(74, 158, 255, 0.1);
          "
        >
          <div
            style="
              display: flex;
              align-items: center;
              cursor: pointer;
              color: white;
              font-size: 16px;
              padding: 10px 20px;
              background: linear-gradient(
                145deg,
                rgba(74, 158, 255, 0.2) 0%,
                rgba(74, 158, 255, 0.1) 100%
              );
              border: 1px solid rgba(74, 158, 255, 0.3);
              border-radius: 8px;
              transition: all 0.3s ease;
              box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
              letter-spacing: 0.5px;
            "
          >
            <el-icon style="margin-right: 8px; font-size: 18px">
              <User />
            </el-icon>
            <span style="text-shadow: 0 0 5px rgba(255, 255, 255, 0.2)"
              >个人中心</span
            >
          </div>
        </div>
        <!-- 占位符，避免内容被固定的顶部栏遮挡 -->
        <div style="height: 90px"></div>
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { User } from "@element-plus/icons-vue";
</script>


<style scoped>
/* 科技感侧边栏背景 */
.el-aside {
  background: linear-gradient(135deg, rgb(35, 63, 82) 0%, rgb(25, 55, 75) 100%);
  border-right: 1px solid rgba(74, 158, 255, 0.2);
  box-shadow: 2px 0 15px rgba(0, 0, 0, 0.3);
  position: relative;
  overflow: hidden;
}

/* 侧边栏装饰线条 */
.el-aside::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(74, 158, 255, 0.3),
    transparent
  );
}

/* 科技感菜单样式 */
:deep(.el-menu),
.el-sub-menu {
  background: transparent;
  border-right: none;
  --el-menu-hover-bg-color: rgba(144, 179, 201, 0.2);
}

/* 菜单标题样式 */
.el-menu-item {
  color: white;
  font-size: 25px !important;
  font-weight: 600;
  height: 80px !important;
  line-height: 80px !important;
  transition: all 0.3s ease;
  border-radius: 8px !important;
  margin: 5px 15px !important;
  position: relative;
  overflow: hidden;
}

/* 菜单图标样式 */
.el-menu-item img {
  transition: all 0.3s ease;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.3));
}

/* 菜单悬浮效果 */
.el-menu-item:hover {
  background-color: rgba(112, 143, 162, 0.3);
  transform: translateX(5px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 20px rgba(74, 158, 255, 0.15);
}

/* 子菜单样式 */
.el-sub-menu {
  margin: 5px 15px !important;
  border-radius: 8px !important;
}

/* 子菜单标题样式 */
.el-sub-menu__title {
  color: white !important;
  font-size: 25px !important;
  font-weight: 600;
  height: 80px !important;
  line-height: 80px !important;
  transition: all 0.3s ease;
  border-radius: 8px !important;
}

/* 子菜单标题悬浮效果 */
.el-sub-menu__title:hover {
  background-color: rgba(112, 143, 162, 0.3) !important;
  transform: translateX(5px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 20px rgba(74, 158, 255, 0.15);
}

/* 子菜单项样式 */
.el-sub-menu .el-menu-item {
  font-size: 20px !important;
  height: 60px !important;
  line-height: 60px !important;
  margin: 2px 10px !important;
}

/* 系统标题样式 */
.system-title {
  background: linear-gradient(
    135deg,
    rgba(35, 63, 90, 0.8) 0%,
    rgba(25, 55, 80, 0.8) 100%
  );
  border-radius: 10px;
  margin: 15px;
  padding: 10px;
  border: 1px solid rgba(74, 158, 255, 0.3);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 20px rgba(74, 158, 255, 0.15);
}

/* 系统标题文字效果 */
.system-title span {
  text-shadow: 0 0 10px rgba(74, 158, 255, 0.3);
  letter-spacing: 1px;
}

/* 主内容区域样式 */
.el-main {
  background: linear-gradient(
    135deg,
    rgb(35, 63, 82) 0%,
    rgb(25, 55, 75) 100%
  ) !important;
}
</style>
